<template>
  <div>
    <div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
  </div>
</template>
<script>
export default {
  props: {
    aces_a: Object,
    shows: Boolean
  },
  watch: {
    aces_a(val) {
      this.aces_a = val;
      this.showdata();
    }
  },
  methods: {
    showdata() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        tooltip: {
          trigger: 'item',
        },
        radar: {
          name: {
            textStyle: {
              color: "#101010",
              borderRadius: 3,
              padding: [-15, -15, 0]
            }
          },
          indicator: [
            {
              name: `破发成功率\n${this.aces_a.game_point_a}/${this.aces_a
                .game_point_a + this.aces_a.retrieve_game_point_b}(${
                this.aces_a.success_game_point
              }%)`,
              max: 100
            },
            {
              name: `一发成功率\n${this.aces_a.first_send_win_a}/${this.aces_a.first_send_total_a}(${this.aces_a.first_send_success}%)`,
              max: 100
            },
            {
              name: `二发得分率\n${this.aces_a.second_send_goal_a}/${this.aces_a.second_send_win_a}(${this.aces_a.second_send_score}%)`,
              max: 100
            },
            {
              name: `接发得分率\n${this.aces_a.first_send_win_b -
                this.aces_a.first_send_goal_b +
                this.aces_a.second_send_win_b -
                this.aces_a.second_send_goal_b}/${this.aces_a.first_send_win_a +
                this.aces_a.second_send_total_a}(${this.aces_a.catch_score}%)`,
              max: 100
            },
            {
              name: `一发得分率\n${this.aces_a.first_send_goal_a}/${this.aces_a.first_send_win_a}(${this.aces_a.first_send_score}%)`,
              max: 100
            }
          ]
        },
        series: [
          {
            name: "",
            type: "radar",
            data: [
              {
                value: [
                  this.aces_a.success_game_point,
                  this.aces_a.first_send_success,
                  this.aces_a.second_send_score,
                  this.aces_a.catch_score,
                  this.aces_a.first_send_score
                ]
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang="less">
#myChart {
  margin: auto;
}
</style>
